@layout('layouts/app')

@section('body')
  <div class="article-page">
    <div class="banner">
        <div class="container">
            <h1>{{ article.title }}</h1>
            {{-- 这里使用了元数据组件 --}}
            @!articles.meta({ article })
        </div>
    </div>

    <div class="container page">
      <div class="row article-content">
        <div class="col-md-12">
            {{{ markdownToHTML(article.body) }}}
        </div>
      </div>

      <hr/>

      <div class="article-actions">
        @!articles.meta({ article })
      </div>

      <div class="row">
        <div class="col-xs-12 col-md-8 offset-md-2">
          @if(auth.isLoggedIn)
            @set('currentProfile', await auth.user.related('profile').query().first())
            <form class="card comment-form" method="POST" action="{{ route('comments.create', article) }}">
              <div class="card-block">
                <textarea id="body" name="body" aria-label="Comment body" class="form-control" placeholder="Write a comment..." rows="3"></textarea>
              </div>
              <div class="card-footer">
                <img src="{{ currentProfile.avatar }}" class="comment-author-img"/>
                <button type="submit" class="btn btn-sm btn-primary">
                  Post Comment
                </button>
              </div>
            </form>
          @else
            <p><a href="/login">Sign in</a> or <a href="/register">sign up</a> to add comments on this article.</p>
          @endif

          @each(comment in article.comments)
            <article class="card">
              <div class="card-block">
                <p class="card-text">{{ comment.body }}</p>
              </div>
              <div class="card-footer">
                <a href="{{ route('profiles.show', comment.author) }}" class="comment-author">
                  <img src="{{ comment.author.avatar}}" class="comment-author-img"/>
                </a>
                &nbsp;
                <a href="{{ route('profiles.show', comment.author) }}" class="comment-author">{{ comment.author.name }}</a>
                <span class="date-posted" title="{{comment.createdAt}}">{{ formatDate(comment.createdAt) }}</span>
                @if(auth.isLoggedIn && auth.user.id === comment.author.userId)
                  <span class="mod-options">
                    <a href="{{ route('comments.edit', { slug: article.slug, id: comment.id }) }}" aria-label="Edit your comment"><i class="ion-edit"></i></a>
                    @buttonTo({ 
                      path: route('comments.destroy', { slug: article.slug, id: comment.id }),
                      method: 'DELETE',
                      'aria-label': "Delete your comment",
                      class: "btn-link"
                    })
                      <i class="ion-trash-a"></i>
                    @end
                  </span>
                @endif
              </div>
            </article>
          @end
        </div>
      </div>
    </div>
  </div>
@end
